$(function () {
  $(".grid-wrap")
    .on("touchstart", ".move-ele", function (e) {
      e.preventDefault();
      $(this).css("transition", "ease 0s");
      var transform = $(this).css("transform");
      $(this).attr("data-transform", transform);

      var thisOffset = $(this).offset();
      moveParam.maxLeft =
        tableParam.left + (e.originalEvent.targetTouches[0].clientX - thisOffset.left);
      moveParam.maxRight =
        tableParam.right -
        (moveParam.width - (e.originalEvent.targetTouches[0].clientX - thisOffset.left));
      // 初次移动
      if (transform === "none") {
        startPoint.x = e.originalEvent.targetTouches[0].clientX;
        startPoint.y = e.originalEvent.targetTouches[0].clientY;

        // 已经移动过
      } else {
        var tranArr = transform.split(')')[0].split(",");
        startPoint.x = e.originalEvent.targetTouches[0].clientX - parseInt(tranArr[tranArr.length - 2]);
        startPoint.y = e.originalEvent.targetTouches[0].clientY - parseInt(tranArr[tranArr.length - 1]);
      }
    })
    .on("touchmove", ".move-ele", function (e) {
      e.preventDefault();
      movePoint.clientX = e.originalEvent.targetTouches[0].clientX;
      movePoint.clientY = e.originalEvent.targetTouches[0].clientY;
      if (movePoint.clientX >= moveParam.maxRight + 18) {
        movePoint.clientX = moveParam.maxRight + 18;
      } else if (movePoint.clientX <= moveParam.maxLeft) {
        movePoint.clientX = moveParam.maxLeft;
      }

      toPoint.x = movePoint.clientX - startPoint.x;
      toPoint.y = movePoint.clientY - startPoint.y;

      $(this).css({
        "transition: ": " all 0 ease 0s;",
        transform: "translate3d(" + toPoint.x + "px," + toPoint.y + "px, 0)"
      });
    })
    .on("touchend", ".move-ele", function (e) {
      var $this = $(this);

      // 没有移动过, 不需要做任何动作
      if (
        !$this.css("transform") ||
        $this.css("transform") === $this.attr("data-transform")
      )
        return;

      // 移动停止，回调
      touchEnd($this, tableParam);
    });
});